<template>
  <div class="x-container">
    <div class="u-flex search-box">
      <div class="u-box" v-if="showdate">
        <span>时间：</span>
        <el-date-picker
          v-model="date"
          size="small"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <div class="u-box" v-if="showStatus">
        <span>状态：</span>
        <el-select v-model="status" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <slot class="u-box" />

      <div class="u-box">
        <span>关键字：</span>
        <el-input
          :placeholder="placeholder"
          v-model="inputContent"
          class="sx-container"
          clearable
          @keyup.enter.native="searchInput"
        >
          <el-button slot="append" type="primary" @click.native="searchInput"
            >搜索</el-button
          >
        </el-input>
      </div>
    </div>

    <div class="btn-box">
      <el-button
        v-if="canSave"
        class="xm-btn--orange"
        type="primary"
        @click.native="createClick"
        icon="el-icon-plus"
        >新建</el-button
      >
      <el-dropdown v-if="pictureExport">
        <el-button icon="el-icon-printer"
          >导出<i class="el-icon-arrow-down el-icon--right"></i
        ></el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="handleExport"
            >导出文字</el-dropdown-item
          >
          <el-dropdown-item @click.native="handleExportPicture"
            >带图片导出</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <el-button v-else icon="el-icon-printer" @click.native="handleExport"
        >导出</el-button
      >
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { formatItemStatus, formatStatus, exportXLSX } from "@/utils/index";
import { exportExclePiature, exportExclePiaturePlanTask } from "@/api/common";
export default {
  name: "XhListHead",

  props: {
    placeholder: {
      type: String,
      default: "请输入内容",
    },

    defaultDateRang: {
      // type: Array,
      // default: [],
    },

    //展示时间
    showdate: { type: Boolean, default: true },
    //展示状态
    showStatus: { type: Boolean, default: true },
    // 是否展示职务
    showJob: { type: Boolean, default: true },
    //是否可以新增
    canSave: { type: Boolean, default: false },

    //模块
    crmType: { type: String },
    //导出的表名
    fielname: { type: String },
    //导出的表头
    listHander: { type: Object },

    //带图片导出
    pictureExport: { type: Boolean, default: false },

    //状态 options
    options: {
      type: Array,
      default: () => {
        return [
          { value: null, label: "全部" },
          { value: "0", label: "未完成" },
          { value: "1", label: "已完成" },
        ];
      },
    },
  },

  data() {
    return {
      date: "",
      // date: defaultDateRang,
      /**状态 */
      status: null,

      /**时间 */
      executets: "",
      executete: "",

      /**关键词 */
      inputContent: null,

      /** 勾选操作数据 */
      selectionList: [],
    };
  },

  mounted() {
    if (this.defaultDateRang && this.defaultDateRang.length > 0) {
      this.date = this.defaultDateRang;
    }
  },

  methods: {
    /**处理搜索数据 */
    formatSearch() {
      let params = {};
      if (this.inputContent) {
        params.keyword = this.inputContent;
      }
      if (this.status) {
        params.dutystatus = this.status;
      }
      if (this.date && this.date.length > 0) {
        params.executets = moment(new Date(this.date[0])).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        params.executete = moment(new Date(this.date[1])).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      return params;
    },

    /**进行搜索操作 */
    searchInput() {
      this.$emit("on-search", this.formatSearch());
    },

    /** 勾选后的表头操作 */
    headSelectionChange(array) {
      this.selectionList = array;
    },

    /**导出文字 */
    handleExport() {
      if (this.selectionList.length < 1) {
        this.$message({ type: "error", message: "请选择要导出的数据" });
        return;
      }
      this.selectionList.map((item) => {
        for (const key in item) {
          if (
            this.crmType == "path" &&
            (key == "pathstatus" || key == "itemstatus")
          ) {
            item[key] = formatItemStatus(item[key]);
          } else if (key == "dutystatus" || key == "pathstatus") {
            item[key] = formatStatus(item[key]);
          }
        }
      });
      if (this.fielname && this.listHander) {
        exportXLSX(this.selectionList, this.listHander, this.fielname);
      }
    },

    /**带图片导出 */
    handleExportPicture() {
      const vm = this;
      if (this.selectionList.length < 1) {
        this.$message({ type: "error", message: "请选择要导出的数据" });
        return;
      }
      if (this.crmType == "plantask") {
        let actitemids = this.selectionList
          .map((item) => "'" + item.actitemid + "'")
          .join(",");
        exportExclePiaturePlanTask({ actitemids }).then((res) => {
          vm.downloadFile(res);
        });
      } else {
        let ids = this.selectionList
          .map((item) => "'" + item.dutyid + "'")
          .join(",");
        console.log(ids, "ids");
        exportExclePiature({ dutyids: ids }).then((res) => {
          vm.downloadFile(res);
        });
      }
    },

    /**下载Excle */
    downloadFile(res) {
      var blob = new Blob([res], {
        type: "application/vnd.ms-excel;charset=utf-8",
      });
      var downloadElement = document.createElement("a");
      var href = window.URL.createObjectURL(blob); // 创建下载的链接
      downloadElement.href = href;
      downloadElement.download = this.fielname; // 下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); // 点击下载
      document.body.removeChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象
    },

    /**新建 */
    createClick() {
      this.$emit("handleCreate");
    },
  },
};
</script>

<style lang="scss" scoped>
.x-container {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 0 20px;
  font-size: 13px;
}

.u-box + .u-box {
  margin-left: 1rem;
}

.el-input {
  ::v-deep .el-input-group__append {
    background-color: #2362fb;
    border-color: #2362fb;
    color: white;
  }
}
.btn-box {
  width: 25%;
  text-align: right;
}

.search-box {
  width: 90%;

  .u-box {
    display: flex;
    align-items: center;
    // width: 25%;
    min-width: 10rem;
    span {
      min-width: 55px;
    }
  }
}

@media screen and (min-width: 1600px) {
  .u-box {
    justify-content: flex-start;
    // width: 300px !important;
  }
}
</style>